import React, { useState, useEffect, useCallback } from "react";
import { Form, Input, Button, Icon, message } from "antd";
import TextArea from "antd/lib/input/TextArea";
import { FileDrawer } from "../../FileDrawer";
import { SettingApi } from "@/api/setting";
interface IProps {
  settings: any;
}
const SYSSetting: React.FC<IProps> = ({ settings }) => {
  const [visible, setVisible] = useState(false);
  const [mode, setMode] = useState("logo");
  const [systemUrl, setSystemUrl] = useState(null);
  const [systemLogo, setSystemLogo] = useState(null);
  const [systemFavicon, setSystemFavicon] = useState(null);
  const [systemTitle, setSystemTitle] = useState(null);
  const [systemFooterInfo, setSystemFooterInfo] = useState(null);
  useEffect(() => {
    setSystemUrl(settings?.systemUrl || null);
    setSystemLogo(settings?.systemLogo || null);
    setSystemFavicon(settings?.systemFavicon || null);
    setSystemTitle(settings?.systemTitle || null);
    setSystemFooterInfo(settings?.systemFooterInfo || null);
  }, [settings]);

  const save = () => {
    SettingApi.updateSettings({
      systemUrl,
      systemLogo,
      systemFavicon,
      systemTitle,
      systemFooterInfo
    }).then(res => {
      message.success("保存成功");
    });
  };
  return (
    <React.Fragment>
      <Form>
        <Form.Item label="系统标题">
          <Input
            value={systemTitle}
            onChange={e => setSystemTitle(e.target.value)}
          />
        </Form.Item>
        <Form.Item label="系统地址">
          <Input
            value={systemUrl}
            onChange={e => setSystemUrl(e.target.value)}
          />
        </Form.Item>
        <Form.Item label="系统LOGO">
          <Input
            value={systemLogo}
            onChange={e => setSystemLogo(e.target.value)}
            addonAfter={
              <Icon
                type="file-image"
                onClick={() => {
                  setMode("logo");
                  setVisible(true);
                }}
              />
            }
          />
        </Form.Item>
        <Form.Item label="Favoritor">
          <Input
            value={systemFavicon}
            onChange={e => setSystemFavicon(e.target.value)}
            addonAfter={
              <Icon
                type="file-image"
                onClick={() => {
                  setMode("favicon");
                  setVisible(true);
                }}
              />
            }
          />
        </Form.Item>
        <Form.Item label="页脚信息">
          <TextArea
            value={systemFooterInfo}
            onChange={e => setSystemFooterInfo(e.target.value)}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={save}>
            保存
          </Button>
        </Form.Item>
      </Form>
      <FileDrawer
        visible={visible}
        onClose={() => setVisible(false)}
        onChange={url => {
          if (mode === "logo") {
            setSystemLogo(url);
          } else {
            setSystemFavicon(url);
          }
        }}
      />
    </React.Fragment>
  );
};

export default SYSSetting;
